<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html+css实现下拉菜单</title>
    <style type="text/css">
        *{ margin:0px; padding:0px;}
        #nav{
            background-color: #eee;
            width: 600px;
            height: 40px;
            margin:0 auto;
        }
        ul{
            list-style: none;
        }

        ul li{
            float: left;
            line-height: 40px;
            text-align: center;
            position: relative;
        }
        a{
            text-decoration: none;
            color: #000;
            display: block;
            padding:0 10px;
            height: 40px;/*解决IE7中的样式问题*/
        }
        a:hover{
            color: #FFF;
            background-color: #666;
        }
        ul li ul li{
            float: none;
            background-color: #eee;
            margin-top: 2px;
        }
        ul li ul li a{
            width: 80px;
        }
        ul li ul{
            position: absolute;
            top:40px;
            left: 0px;
            display: none;
        }

        ul li ul li a:hover{
            background-color: #06F;
        }
        ul li:hover ul{display: block}
    </style>
</head>
<body>
 <div id="nav">
     <ul>
         <li><a href="#">首页</a></li>
         <li><a href="#">课程大厅课程大厅</a>
             <ul>
                 <li><a href="#">JavaScript</a></li>
                 <li><a href="#">jQuery</a></li>
             </ul>
         </li>
         <li><a href="#">学习中心</a>
             <ul>
                 <li><a href="#">视频学习</a></li>
                 <li><a href="#">案例学习</a></li>
                 <li><a href="#">交流平台</a></li>
             </ul>
         </li>
         <li><a href="#">经典案例</a></li>
         <li><a href="#">关于我们</a></li>
     </ul>
 </div>

</body>
</html>